<template>
  <div>
      <el-row>
          <el-col :span="15">
              <el-form :inline="true" :model="queryMap" class="demo-form-inline">
                  <el-form-item label="员工姓名">
                      <el-input v-model="queryMap.ename" placeholder="员工姓名"></el-input>
                  </el-form-item>
                  <el-form-item label="所属部门">
                      <el-select v-model="queryMap.deptno" placeholder="所属部门">
                          <el-option v-for="dept in deptlist" :key="dept.deptno" :label="dept.dname" :value="dept.deptno"></el-option>
                      </el-select>
                  </el-form-item>
                  <el-form-item>
                      <el-button type="primary" @click="search">查询</el-button>
                  </el-form-item>
              </el-form>
          </el-col>
          <el-col :span="4">&nbsp;</el-col>
          <el-col :span="5">
              <el-button-group>
                  <el-button type="primary" icon="el-icon-plus" @click="openAdd">新增</el-button>
                  <el-button type="primary" icon="el-icon-edit" @click="openEdit">修改</el-button>
                  <el-button type="primary" icon="el-icon-delete" @click="delEmp">>删除</el-button>
              </el-button-group>
          </el-col>
      </el-row>
<!--@selection-change:点击复选框触发，-->
      <el-table
          :data="tableData"
          stripe
          border
          style="width: 100%"
          @selection-change="handleSelectionChange">
          <el-table-column
              prop="empno"
              type="selection">
          </el-table-column>
          <el-table-column
              type="index"
              label="序号">
          </el-table-column>
          <el-table-column
              prop="ename"
              label="员工姓名"
              width="180">
          </el-table-column>
          <el-table-column
              prop="deptno"
              label="部门编号"
              width="180">
          </el-table-column>
          <el-table-column
              prop="dname"
              label="部门名称"
              width="180">
          </el-table-column>
          <el-table-column
              prop="sex"
              label="性别"
              width="180">
          </el-table-column>
          <el-table-column
              prop="job"
              label="工作">
          </el-table-column>
          <el-table-column
              prop="sal"
              label="工资">
          </el-table-column>
          <el-table-column
              prop="hiredate"
              label="入职日期">
          </el-table-column>
          <el-table-column
              prop="job"
              label="工作">
          </el-table-column>
      </el-table>
<!-- 分页-->
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="queryMap.page"
          :page-sizes="[10, 20, 50, 100, 200]"
          :page-size="queryMap.limit"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>
<!--      visible.sync:控制弹出框的显示和隐藏，true为显示-->
      <EmpForm
          :isEdit="isEdit"
          :formVisible.sync="formVisible"
          :formData="formData"
          :deptlist="deptlist"
          @submitForm="save"
      ></EmpForm>
  </div>
</template>

<script>

import EmpForm from "@/views/EmpForm.vue";
export default {
    name: "EmpView",
    data() {
        return {
            //查询条件
            queryMap: {
                ename: '',
                deptno: '',
                page: 1,  //当前页码
                limit: 10 //每页条数
            },
            total: 0, //总条数
            //部门
            deptlist: [],
            tableData: [],
            formVisible: false,

            //表单数据
            formData: {
                empno: '',
                ename: '',
                deptno: '',
                sex: '',
                job: '',
                sal: '',
                hiredate: ''
            },
            //标志新增还是修改，false为新增
            isEdit: false,
            //复选框选择的数据
            multipleSelection: [],
        }
    },

    methods: {
        //点击查询按钮
        search() {
            this.queryMap.page = 1
            this.getEmpList()
        },
        openAdd() {
            this.isEdit = false
            this.formData= {
                empno: '',
                ename: '',
                deptno: '',
                sex: '',
                job: '',
                sal: '',
                hiredate: ''
            }
            this.formVisible = true
        },
        openEdit() {
            const self = this
            //判断是否选中了一条数据
            if(self.multipleSelection.length === 0) {
                self.$message({
                    type: 'info',
                    message: '请选择要修改的数据'
                })
            } else if(self.multipleSelection.length > 1) {
                self.$message({
                    type: 'info',
                    message: '只能选择一条数据'
                })
            } else {
                //获取选择行的数据
                let empno = self.multipleSelection[0].empno
                self.$http.get('getById/' + empno).then(res => {
                    //根据主键获取要修改的数据
                    self.formData = res.data
                    self.isEdit = true
                    self.formVisible = true
                }).catch(() => {
                    self.$message.error("获取员工对象数据失败")
                })
            }
        },
        //删除员工
        delEmp() {
            const self = this
            //判断是否选中了一条数据
            if(self.multipleSelection.length === 0) {
                self.$message({
                    type: 'info',
                    message: '请选择要删除的数据'
                })
                return
            }
            //询问用户
            this.$confirm('确定删除吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                //点击确定的回调
                let empArr = []
                for (let i = 0; i < self.multipleSelection.length; i++) {
                    empArr.push(self.multipleSelection[i].empno)
                }
                self.$http.post('delEmp', empArr).then(res => {
                    if(res.data === 'success'){
                        self.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                        //刷新列表
                        this.queryMap.page = 1
                        this.getEmpList()
                    } else {
                        this.$message.error('删除失败')
                    }
                }).catch(() => {
                    this.$message.error('删除员工失败，请联系管理员')
                })

            }).catch(() => {
                //点击取消的回调
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });

        },
        //保存新增
        save(formData) {
            //判断新增还是修改
            if(!this.isEdit) {
                this.$http.post('addEmp', formData).then(res => {
                    if(res.data === 'success') {
                        //给出提示
                        this.$message({
                            type: 'success',
                            message: '保存成功'
                        })
                        //关闭弹框
                        this.formVisible = false
                        //刷新列表
                        this.queryMap.page = 1
                        this.getEmpList()
                    }
                }).catch(() => {
                    this.$message.error('保存员工失败，请联系管理员')
                })
            } else {
                this.$http.post('editEmp', formData).then(res => {
                    if(res.data === 'success') {
                        //给出提示
                        this.$message({
                            type: 'success',
                            message: '修改成功'
                        })
                        //关闭弹框
                        this.formVisible = false
                        //刷新列表
                        this.queryMap.page = 1
                        this.getEmpList()
                    }
                }).catch(() => {
                    this.$message.error('修改员工失败，请联系管理员')
                })
            }
        },

        getDeptList() {
            const self = this
            this.$http.get('deptList').then(res => {
                self.deptlist = res.data
            }).catch(error => {
                this.$message.error('查询部门错误，请联系管理员')
            })
        },
        //每页条数改变，val改变后的条数
        handleSizeChange(val) {
            this.queryMap.limit = val;
            this.queryMap.page = 1
            this.getEmpList()
        },
        //页码改变，val改变后的页码
        handleCurrentChange(val) {
            this.queryMap.page = val
            this.getEmpList()
        },
        //查询员工信息
        getEmpList() {
            this.$http.post('list', this.queryMap).then(res => {
                this.tableData = res.data.data
                this.total = res.data.count
            }).catch(error => {
                this.$message.error("获取员工列表失败")
            })
        },
        //点击复选框触发，val是勾选中的数据
        handleSelectionChange(val) {
            this.multipleSelection = val;
        }
    },
    components: {
        EmpForm
    },
    created() {
        this.getDeptList()
        this.getEmpList()
    }
}
</script>

<style scoped>

</style>